<template>
	<el-container>
		<el-header>
			<el-row>
				<el-col :span="1">
					<span><i class="el-icon-s-help" style="text-align: right; font-size: 30px; color: #42acff; padding-top: 13px;"></i></span>
				</el-col>
				<el-col :span="2">
					<span>综合定位平台</span>
				</el-col>
				<el-col :span="17">
					<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" active-text-color="#00acff" @select="handleSelect">
						<el-menu-item index="1">地图监控</el-menu-item>
						<el-menu-item index="2">实体管理</el-menu-item>
						<el-menu-item index="3">围栏管理</el-menu-item>
					</el-menu>
				</el-col>

				<el-col :span="4" style="text-align: right; font-size: 12px">
					<el-dropdown>
						<i class="el-icon-user-solid" style="margin-right: 15px"></i>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item><i class="el-icon-guide" style="margin-right: 15px"></i>退出登录</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
					<span>Admin</span>
				</el-col>

			</el-row>
		</el-header>
		<el-container>
			<el-aside width="300px">

				<el-form :inline="true" :model="formInline" class="demo-form-inline" style="height: 50px;padding-top: 10px;">
					<el-form-item>
						<el-input v-model="formInline.name" size="small" placeholder="编号"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" size="small" @click="onSubmit" icon="el-icon-search"></el-button>
					</el-form-item>
				</el-form>

				<el-row type="flex" justify="space-between">
					<el-col :span="2"></el-col>
					<el-col :span="4">
						<p><strong>7</strong><br><span style="font-size: 8px;font-weight: normal;color: #00000088;">总数</span></p>
					</el-col>
					<el-col :span="6">
						<p><strong>7</strong><br><span style="font-size: 8px;font-weight: normal;color: #00000088;">离线</span></p>
					</el-col>
					<el-col :span="4">
						<p><strong>0</strong><br><span style="font-size: 8px;font-weight: normal;color: #00000088;">在线</span></p>
					</el-col>
					<el-col :span="2"></el-col>
				</el-row>

				<el-table :data="deviceList" style="width: 100%;" size="mini" :show-header="false">
					<el-table-column prop="Alias" label="编号" width="210">
					</el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button size="medium" type="text" icon="el-icon-s-data" style="color:#149802; font-size: 20px;" v-if="scope.row.Outline == 1"></el-button>
							<el-button size="medium" type="text" icon="el-icon-s-data" style="color:#ff0000; font-size: 20px;" v-if="scope.row.Outline == 0"></el-button>
							<el-button size="medium" type="text" icon="el-icon-location" style="color:#2487ff; font-size: 20px;" @click="handleD(scope.$index, scope.row)"></el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage+1"
				:page-size="pagesize" layout="total, prev, pager, next" :total="total">
				</el-pagination>
			</el-aside>
			<el-main>
				<amap :zoom="14" :center.sync="center" @hotspotclick="onHotspotClick">
					<amap-marker :position="position" :label="selectlabel" @click="selectVisible=true"/>

					<amap-info-window :visible="selectVisible" :position="position" :offset="[250, 180]" auto-move is-custom
					closeWhenClickMap>
						<el-card class="box-card">
							<div slot="header" class="clearfix">
								<span>{{selectlabel.TermID}}</span>
								<el-button style="float: right; padding: 3px 0" type="text" icon="el-icon-close" @click="selectVisible=false"></el-button>
							</div>
							<div class="text item">
								别名：{{selectlabel.Alias}}
							</div>
							<div class="text item">
								类型：{{selectlabel.Type}}
							</div>
							<div class="text item">
								经纬度：{{ position[0] }}, {{ position[1] }}
							</div>
							<div class="text item">
								状态：{{selectlabel.State}}
							</div>
							<div class="text item">
								位置在线状态：{{selectlabel.Working}}
							</div>
							<div class="text item">
								绑定人员：{{selectlabel.Owner}}
							</div>
							<div class="text item">
								最新定位时间：{{selectlabel.LastTime}}
							</div>
						</el-card>
					</amap-info-window>

				</amap>
			</el-main>
		</el-container>

	</el-container>
</template>

<script>
	import axios from '../utils/axios'

	export default {
		data() {
			return {
				timer_num: 1,
				activeIndex: '1',
				formInline: {
					name: '',
				},
				center: [117.405994, 39.915378],
				position: [117.405994, 39.915378],
				deviceList: [],
				currentPage: 0, //0 开始
				pagesize: 10,
				total: 100,
				selectlabel: {
					content: "",
					direction: 'bottom',
					TermID:'',
					Alias:'',
					Type:'',
					State:'',
					Working:'',
					Outline:'',
					Owner:'',
					LastTime:'',
				},
				selectVisible: false
			};
		},
		created() {
			// this.$Cookies.set('username', 'colin', { expires: 1 });
			let a = this.$Cookies.get('username');
			console.log('111created!----' + a);
		},
		mounted() {
			console.log('mounted!----111');
			// setInterval(() => {
			// 	this.timer_num++;
			// 	console.log("timer_num=" + this.timer_num);
			// }, 5000)
			this.list_device();
		},
		methods: {
			onHotspotClick(e) {
				if (e && e.lnglat) {
					this.center = [e.lnglat.lng, e.lnglat.lat];
					console.log(this.center);
				}
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.pagesize = val;
				this.currentPage = 0;
				this.list_device();
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.currentPage = val - 1;
				this.list_device();
			},
			list_device() {
				let _this = this;
				//http://test6.megowx.com/api/v2/list_device
				//http://localhost:8080/api/v2/list_device
				//http://rhc.test/api/v2/list_device
				axios.post('/list_device', {
						PageIndex: _this.currentPage,
						PageSize: _this.pagesize,
						Alias: this.formInline.name
					}).then(function(response) {
						console.log("123456");
						console.log(response);
						_this.total = response.total;
						console.log(response.result);
						_this.deviceList = response.result;
					})
					.catch(function(error) {
						console.log("22");
						console.log(error);
					});

			},
			onSubmit() {
				this.list_device();
			},
			open(TermID) {
				this.$notify({
					// title: '警告',
					message: TermID + '未定位！',
					type: 'warning',
					showClose: false
				});
			},
			handleD(index, row) {
				console.log(this.center);
				let _this = this;
				console.log(index, row.TermID);
				let TermIDs = [row.TermID];
				axios.post('/latest_device_position', {
						TermID: TermIDs
					}).then(function(response) {
						console.log(response);
						if (response.total > 0 && response.result[0].lon != null) {
							_this.center = [response.result[0].lon, response.result[0].lat];
							_this.position = _this.center;
							_this.selectlabel.content = row.TermID;
							_this.selectlabel.TermID = row.TermID;
							_this.selectlabel.Alias = row.Alias;
							_this.selectlabel.Type = row.Type;
							_this.selectlabel.State = row.State;
							_this.selectlabel.Outline = row.Outline;
							_this.selectlabel.Working = row.Working;
							_this.selectlabel.LastTime = row.LastTime;
							_this.selectlabel.Owner = row.Owner;
							_this.selectVisible = true;
						
							console.log(response.result[0]);
						} else {
							_this.open(row.TermID);
							_this.selectVisible = false;
						}
					})
					.catch(function(error) {
						console.log(error);
					});
			},
			handleSelect(key, keyPath) {
				console.log(key, keyPath + "=keyPath");
				if (key == '1') {
					// this.$router.push({
					// 	path: '/cart'
					// });
				} else if (key == "2") {

					this.$router.push({
						path: '/entity'
					});
				} else if (key == "3") {
					this.$router.push({
						path: '/fence'
					});
				} else if (key == '4') {
					this.$router.push({
						path: '/config'
					});
				}
			}
		}
	}
</script>

<style>
	.el-header {
		background-color: #ffffff;
		color: #333;
		text-align: center;
	}

	.el-main {
		text-align: center;
		padding: 0px;
	}

	.el-aside {
		background-color: #ffffff;
		color: #333;
		text-align: center;
	}

	.el-table__body tr,
	.el-table__body td,
	.cell {
		text-align: left;
		left: 10px;
		/*top: 10px;
		height: 40px; */
	}
	
	.text {
		font-size: 13px;
	}

	.item {
		margin-bottom: 3px;
		background: #fffcfc;
		text-align: left;
	}
	
	.el-card__header {

		background: #fffcfc;
	}
	
	.el-card__body {
		background: #fffcfc;
	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}
	.clearfix:after {
		clear: both
	}

	.box-card {
		width: 280px;
		background: #fffcfc;
	}
	
</style>
